<template>
  <div class="content">
        <div class="fill-up">
            <Popover trigger="click">
              <template #content>
                 <ColorPicker
                    v-if="!clickDisable"
                    :modelValue="fill"
                    @update:modelValue="value => updateFill(value)"
                />
              </template>
              <Button size="small" type="text" class="text-color-btn" style="flex: 3;" :disabled="clickDisable">
                  <i class="iconfont icon-colorSelector down-size" style="font-size:18px;"></i> 颜色填充
                  <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
              </Button>
            </Popover>
             <Button size="small" type="text" @click="handleShdown" :disabled="clickDisable">
                <i class="iconfont icon-yinying "></i>阴影
                <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
            </Button>
        </div>
        <div class="fill-down">
           <Dropdown :trigger="['click']" :disabled="clickDisable">
                <Button  size="small" type="text" >   <i class="iconfont icon-zitibiankuang " style="margin-right:2px;font-size: 14px;margin-left: 3px;"></i>边框设置   
                    <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
                </Button>
                <template #overlay>
                    <Menu class="world-space">
                         <MenuItem>
                             <Popover trigger="click" v-if="!bordisable">
                                    <template #content v-if=" hasOutline &&  outline">
                                        <ColorPicker
                                        :modelValue="outline?.color"
                                        @update:modelValue="value => updateOutline({ color: value })" />
                                    </template>
                                    <Button size="small" type="text" class="text-color-btn">
                                        <i class="iconfont icon-yanseku ant-btn-sm"></i>  颜色
                                    </Button>
                             </Popover>
                            <Button size="small" type="text" class="text-color-btn" :disabled="bordisable" v-if="bordisable">
                                <i class="iconfont icon-yanseku ant-btn-sm"></i>  颜色
                            </Button>
                         </MenuItem>
                          <MenuItem >
                            <SubMenu>
                                <Dropdown   placement="topRight"  :disabled="bordisable">
                                    <Button  size="small" type="text" > <i class="iconfont icon-biankuangyangshi ant-btn-sm"></i> 样式</Button>
                                    <template #overlay>
                                        <Menu >
                                            <MenuItem class="line-div" @click="updateOutline({ style: 'solid' })">
                                                <div class="solid-line line">————</div>
                                            </MenuItem>
                                            <MenuItem class="line-div" @click="updateOutline({ style: 'dashed' })">
                                                <div class="dotted-line line">----------</div>
                                            </MenuItem>
                                        </Menu>
                                    </template>
                                </Dropdown>
                            </SubMenu>
                        </MenuItem>
                        <MenuItem>
                              <Button  size="small" type="text" @click="showRate=true"> <i class="iconfont icon-wenbenduiqi ant-btn-sm font-bold"></i>粗细</Button>
                        </MenuItem>
                    </Menu>
                </template>
           </Dropdown>
           <Popover :trigger="['click']" placement="bottom">
                <Button  size="small" type="text" :disabled="clickDisable"> <i class="iconfont icon-toumingdu"/>不透明度  
                    <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
                </Button>
                <template #content>
                    <div class="silder" v-if="!clickDisable">
                        <Slider
                            class="opacity-slider"
                            :min="0"
                            :max="1"
                            :step="0.1"
                            :value="opacity"
                            @change="value => updateOpacity(value as number)" />
                    </div>
              </template>
           </Popover>
        </div>
        <mask-form :showRate="showRate" :infoObject="formitem" @close="showRate=false"></mask-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTShapeElement, ShapeGradient, PPTElementOutline } from '@/types/slides'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import emitter, { EmitterEvents } from '@/utils/emitter'
import MaskForm from '@/components/MakForm.vue'
const mainStore = useMainStore()
const slidesStore = useSlidesStore()
const { handleElement, handleElementId } = storeToRefs(mainStore)
const { addHistorySnapshot } = useHistorySnapshot()
defineProps({
  fixed: {
    type: Boolean,
    default: false,
  },
})
const showRate = ref(false)
const clickDisable = ref(false)
const hasRoute = ref(0)
const formitem = {
  title: '边框粗细',
  itemLabel: '边框',
  formtype: 'jamb'
}
const outline = ref<PPTElementOutline>()
const hasOutline = ref(false)
const bordisable = ref(true)
const fill = ref<string>('#000')
const gradient = ref<ShapeGradient>({
  type: 'linear', 
  rotate: 0,
  color: ['#fff', '#fff'],
})
const opacity = ref<number>(1)
watch(handleElement, () => {
  if (!handleElement.value) { // 页面没有聚焦到字体上，禁止点击
    clickDisable.value = true
    return 
  }
  clickDisable.value = false
  outline.value = 'outline' in handleElement.value ? handleElement.value.outline : undefined
  if (outline.value === undefined) { // 边框初始化没有值，只能先设置边框的粗细
    bordisable.value = true
  }
  else {
    bordisable.value = false
  }
  hasOutline.value = !!outline.value
  opacity.value = 'opacity' in handleElement.value && handleElement.value.opacity !== undefined ? handleElement.value.opacity : 1
}, { deep: true, immediate: true })

watch(showRate, (val, old) => {
  if (handleElement.value) {
    if (val) {
      if ( !outline.value ) {
        updateOutline({ width: 2 })
      }
    }
  }
})

const updateElement = (props: Partial<PPTShapeElement>) => {
  slidesStore.updateElement({ id: handleElementId.value, props })
  addHistorySnapshot()
}
const updateOutline = (outlineProps: Partial<PPTElementOutline>) => {
  if (!handleElement.value) return
  const props = { outline: { ...outline.value, ...outlineProps } }
  slidesStore.updateElement({ id: handleElement.value.id, props })
  addHistorySnapshot()
}
// 设置填充色
const updateFill = (value: string) => {
  updateElement({ fill: value })
}
const emitRichTextCommand = (command: string, value?: string) => {
  emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command, value } })
}
const handleShdown = () => {
  mainStore.setShadow(true)
  mainStore.setBackFill(false)
}
const updateOpacity = (value: number) => {
  if (!handleElement.value) return
  const props = { opacity: value }
  slidesStore.updateElement({ id: handleElement.value.id, props })
  addHistorySnapshot()
}
const handleShow = () => {
  showRate.value = true
  hasRoute.value = 0
}
const handleConfirm = (value:any) => {
  showRate.value = false
  hasRoute.value = value
  updateOutline({ width: value as number })
}
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-direction: column;
  .fill-seting {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
  }
  .menu-item {
    width: 60px;
    text-align: center;
    display: flex;
    cursor: pointer;
    justify-content: center;
    flex-direction: column;
    .add_label {
      margin-top: 3px;
    }
    .down-size {
      font-size: 10px;
      margin-left: 1px;
    }
  }
  .down-size {
    font-size: 10px;
    margin-left: 1px;
  }
  .line-div {
    width: 300px !important;
    .line {
      height: 20px;
      width: 300px;
      background-color: red !important;
    }
    .solid-line {
      border: 1px solid #454d5a;
    }
    .dotted-line {
      border: 1px dotted #454d5a;
    }
  }
}
</style>
<style >
  .ant-popover-inner-content {
    padding: 6px !important;
  }
  .ant-popover-content {
    padding: 5px !important;
  }
  .ant-slider-track {
    background-color: #3d7eff !important;
  }
  .ant-slider-handle {
    background-color: white !important;
    border: 1px solid #d4d4d4 !important;
  }
  .silder {
    width: 200px !important;
  }
</style>